<template>
  <card-layout title="储量统计" bg="3" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="reserves-stats">
      <div class="stats-content">
        <!-- 储量利用率环形图 -->
        <div class="usage-rate-chart">
          <div class="chart-container">
            <div style="width: 100%; height: 100%" ref="pieChartRef"></div>
            <div class="chart-label">
              <div class="percent">29.8%</div>
              <div class="txt">储量利用率</div>
            </div>
          </div>

          <div class="stats-info">
            <div class="total-info">
              <!-- <div class="info-item">
                <div class="info-label">总储量</div>
                <div class="info-value">158,784,582 方</div>
              </div> -->
              <div class="info-item">
                <div class="info-label">已开采</div>
                <div class="info-value">8,784 万方</div>
              </div>
              <div class="info-item grey">
                <div class="info-label">剩余储量</div>
                <div class="info-value">15,478 万方</div>
              </div>
            </div>
          </div>
        </div>
        <div class="stratum-stats">
          <div class="title">方量趋势图</div>
          <div class="chart-container" ref="lineChartRef"></div>
        </div>
        <!-- 地层储量统计柱状图 -->
        <div class="stratum-stats">
          <div class="title">地层储量统计</div>
          <div class="chart-container" ref="barChartRef"></div>
        </div>

        <!-- 储量数据表格 -->
        <div class="stats-table" v-show="false">
          <el-table :data="stratumData" style="width: 100%" border>
            <el-table-column prop="name" label="地层" width="180" />
            <el-table-column prop="mined" label="已采方量" width="120" />
            <el-table-column prop="remaining" label="剩余方量" width="120" />
            <el-table-column
              prop="remainingRate"
              label="剩余占比"
              width="120"
            />
          </el-table>
          <div class="table-footer">
            <div class="footer-row">
              <div class="footer-label">合计</div>
              <div class="footer-value">27457万吨</div>
              <div class="footer-value">157487万吨</div>
              <div class="footer-value">73.6%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script>
import { ref, onMounted } from "vue";
import { Close } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import useChart from "@/hooks/useCharts.js";
import { yAxisOption, xAxisOption } from "@/utils/chartOptions";

export default {
  name: "ReservesStats",
  components: {
    Close,
  },
  emits: ["close"],
  setup(props, { emit }) {
    const pieChartRef = ref(null);
    const barChartRef = ref(null);
    const lineChartRef = ref(null);
    let pieChart = useChart(pieChartRef).chartInstance;
    let barChart = useChart(barChartRef).chartInstance;
    let lineChart = useChart(lineChartRef).chartInstance;
    console.log({ lineChart });
    // 模拟地层数据
    const stratumData = ref([
      {
        name: "3源采用石灰岩",
        mined: "152万吨",
        remaining: "418万吨",
        remainingRate: "68.3%",
      },
      { name: "活河用白云岩", mined: "", remaining: "", remainingRate: "" },
      { name: "水泥用灰岩", mined: "", remaining: "", remainingRate: "" },
    ]);

    // 初始化环形图
    const initPieChart = () => {
      const option = {
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["68%", "92%"],
            avoidLabelOverlap: false,
            // label: {
            //   show: true,
            //   position: "center",
            //   formatter: "25.6%\n储量利用率",
            //   fontSize: 12,
            //   color: "#dedede",
            // },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 28.2,
                name: "已挖",
                itemStyle: {
                  color: "#ffc107",
                  borderRadius: "8px",
                },
              },
              {
                value: 71.8,
                name: "未挖",
                itemStyle: {
                  color: "#9e9e9e9e",
                  borderRadius: "8px",
                },
              },
            ],
          },
        ],
      };
      pieChart.value.setOption(option);
    };

    // 初始折线图
    const initLineChart = () => {
      const lineChartOptions = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["建筑用灰岩", "电石用石灰岩", "熔剂用白云岩", "残坡积层"],
        },
        grid: {
          top: "30%",
          bottom: 0,
          right: 8,
          left: 12,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "2025/01",
            "2025/02",
            "2025/03",
            "2025/04",
            "2025/05",
            "2025/06",
            "2025/07",
          ],
          ...xAxisOption,
          axisLabel: {
            margin: 12,
            fontSize: 12,
            width: 60,
            // interval: 0,
            // rotate: 25,
          },
        },
        yAxis: {
          name: "万方",
          ...yAxisOption,
          axisLabel: {
            fontSize: 12,
            color: "#E4F4FF",
          },
        },
        series: [
          {
            name: "建筑用灰岩",
            type: "line",
            stack: "Total",
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            data: [321, 303, 287, 265, 255, 241, 233],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            smooth: true,
          },
          {
            name: "电石用石灰岩",
            type: "line",
            stack: "Total",
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [888, 874, 868, 860, 855, 850, 848],
            smooth: true,
          },
          {
            name: "熔剂用白云岩",
            type: "line",
            stack: "Total",
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [564, 562, 533, 530, 522, 514, 511],
            smooth: true,
          },
          {
            name: "残坡积层",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 0, 135)",
                },
                {
                  offset: 1,
                  color: "rgb(135, 0, 157)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
        ],
      };
      lineChart.value.setOption(lineChartOptions);
    };

    // 初始化柱状图
    const initBarChart = () => {
      // barChart = useChart(barChartRef).chartInstance;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["剩余方量", "已采方量"],
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: ["0%", "15%"],
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: [
            "熔剂用白云岩",
            "残坡积层",
            "水泥用灰岩矿",
            "电石用石灰岩",
            "建筑用灰岩",
          ],
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "剩余方量",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 52, 101, 134, 90],
            // barWidth: 25,
            showBackground: true,
          },
          {
            name: "已采方量",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 31, 191, 234, 290],
            showBackground: true,
          },
        ],
      };
      barChart.value.setOption(option);
    };

    onMounted(() => {
      initPieChart();
      initLineChart();
      initBarChart();
    });

    const onClose = () => {
      emit("close");
    };

    return {
      pieChartRef,
      barChartRef,
      stratumData,
      lineChartRef,
      onClose,
    };
  },
};
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
}
.reserves-stats {
  background-color: transparent;
  color: #333;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px;

  .stats-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;

    .usage-rate-chart {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0px 12px;

      .chart-container {
        width: 150px;
        height: 150px;
        position: relative;

        .chart-label {
          user-select: none;
          position: absolute;
          pointer-events: none;
          top: 0px;
          left: 0px;
          z-index: 1;
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .percent {
            font-size: 24px;
            color: #fff;
          }

          .txt {
            color: #dedede;
            font-size: 12px;
          }
        }
      }

      .stats-info {
        flex: 1;
        padding-left: 20px;

        .total-info {
          display: flex;
          flex-direction: column;
          gap: 10px;

          .info-item {
            display: flex;
            align-items: center;
            .info-label {
              font-size: 14px;
              color: #dedede;
            }

            .info-value {
              font-size: 14px;
              font-weight: 500;
              color: #ffc107;
              margin-left: 12px;
            }
            // color: #9e9e9e21;
            &::before {
              content: "";
              display: inline-block;
              background-color: #ffc107;
              height: 12px;
              width: 16px;
              border-radius: 2px;
              vertical-align: middle;
              margin-right: 8px;
            }

            &.grey {
              &::before {
                content: "";
                display: inline-block;
                background-color: #9e9e9e9e;
                height: 12px;
                width: 16px;
                border-radius: 2px;
                vertical-align: middle;
                margin-right: 8px;
              }
            }
          }
        }
      }
    }

    .stratum-stats {
      flex: 1;
      .title {
        font-size: 14px;
        color: #fff;
        font-weight: 300;
        line-height: 32px;
      }

      .chart-container {
        width: 100%;
        height: 100%;
      }
    }

    .stats-table {
      flex: 1;

      .table-footer {
        background-color: rgba(60, 179, 113, 0.1);
        padding: 10px 0;

        .footer-row {
          display: flex;

          .footer-label {
            width: 180px;
            padding: 0 10px;
            font-weight: bold;
            color: #2e8b57;
          }

          .footer-value {
            width: 120px;
            text-align: center;
            font-weight: bold;
            color: #2e8b57;
          }
        }
      }
    }
  }
}
</style>

<!-- 添加全局样式 -->
<style>
.reserves-stats .el-table__cell .cell {
  color: #333 !important;
}
.reserves-stats .el-table__header-wrapper .cell {
  color: #333 !important;
  font-weight: 600 !important;
}
.reserves-stats .el-table__body-wrapper .cell {
  color: #333 !important;
}
.reserves-stats .el-table__row {
  color: #333 !important;
}
.reserves-stats .el-table__row td {
  color: #333 !important;
}
</style>
